<script setup lang="ts">
import { ref, reactive, onBeforeMount } from "vue";
import { ElMessageBox, ElMessage } from 'element-plus'
import service from "~/service";
import OrderDetails from "./OrderDetails.vue"

const query = reactive({
    username: '',
    phoneNumber: '',
    salesman: '',
    date: '',
})
const page = reactive({
    pageIndex: 1,
    pageSize: 10,
})

const pageTotal = ref(0)
const tableData = ref<Order[]>([])
const tableMaxHeight = ref(300)
const dialogVisible = ref(false)
const order = ref({})
const loading = ref(false)
const downloading = ref(false)

onBeforeMount(async () => {
    tableMaxHeight.value = document.body.clientHeight - 242;
    getList()
})
const getList = async () => {
    loading.value = true;
    const res = await service.order.getOrderList(query, page);
    loading.value = false;
    if (res.code === 200) {
        const data: any = res.data
        if (data && data.list instanceof Array) {
            tableData.value = data.list;
            pageTotal.value = data.total
        }
    }
}
const handleShowDialog = (row: any) => {
    order.value = row;
    dialogVisible.value = true;
}
const downloadOrder = async (row: any) => {
    if (downloading.value) {
        return
    }
    downloading.value = true
    const res = await service.order.downloadOrder(row)
    downloading.value = false

    const data: any = res.data
    const fileUrl = window.URL.createObjectURL(new Blob([data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    }))
    const downloadElement = document.createElement('a')
    downloadElement.href = fileUrl
    downloadElement.download = '报价单详情.xlsx'
    document.body.appendChild(downloadElement)
    downloadElement.click()
    document.body.removeChild(downloadElement)
    window.URL.revokeObjectURL(fileUrl)
}
const handleSubmit = async (type: number, row: any) => {
    const params = {
        orderCode: row.orderCode,
        status: type,
        auditStatus: row.auditStatus
    }
    let res = await service.order.approveOrder(params)
    if (res.data.code === 200) {
        ElMessage({
            type: 'success',
            message: '操作成功',
        })
        getList()
    } else {
        ElMessage({
            type: 'error',
            message: res.data.msg,
        })
    }
}
const handlePaginationChange = ()=>{
    console.log(page)
}
</script>
<template>
    <div class="full-flex-column-layout order">
        <div class="operation">
            <el-form :inline="true" class="form">
                <el-form-item label="用户名：">
                    <el-input v-model="query.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：">
                    <el-input v-model="query.phoneNumber" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="邀请人：">
                    <el-input v-model="query.salesman" placeholder="请输入业务员"></el-input>
                </el-form-item>
                <el-form-item label="订单日期：">
                    <el-date-picker
                        v-model="query.date"
                        type="daterange"
                        range-separator="到"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
            <div class="button-group">
                <el-button>重 置</el-button>
                <el-button type="primary" @click="getList">查 询</el-button>
            </div>
        </div>
        <div class="space"></div>
        <div class="content" v-loading="loading" element-loading-text="数据加载中. . .">
            <el-table :data="tableData" stripe :max-height="tableMaxHeight">
                <el-table-column type="index" width="50" />
                <el-table-column prop="no" label="订单编号" width="180">
                    <template #default="{ row }">
                        <div class="link">{{ row.orderCode }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="客户名称" width="180" />
                <el-table-column prop="mobile" label="手机号" width="180" />
                <el-table-column prop="createDate" label="订单时间" width="180" />
                <el-table-column label="订单状态" width="180">
                    <template #default="{ row }">
                        <div>{{ row.auditStatus === 110 ? '已驳回' : row.auditStatus > 110 ? '已提交' : '待提交' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="priceTatol" label="订单金额(元)" width="180" />
                <el-table-column prop="businessGroupMember" label="业务员" width="180" />
                <el-table-column label="操作" min-width="300">
                    <template #default="{ row }">
                        <div class="table-operation">
                            <div class="text" @click="handleShowDialog(row)">订单详情</div>
                            <div class="text" @click="downloadOrder(row)">下载</div>
                            <el-button v-if="row.auditStatus <= 110" type="primary" @click="handleSubmit(1, row)">提交</el-button>
                            <el-button v-if="row.auditStatus > 110" type="warning" @click="handleSubmit(0, row)">驳回</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    v-model:currentPage="page.pageIndex"
                    v-model:page-size="page.pageSize"
                    background
                    layout="prev, pager, next, sizes, jumper"
                    :total="pageTotal"
                    @current-change="handlePaginationChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="订单详情" width="1080px">
            <order-details :order="order"></order-details>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.order {
    .form {
        :deep(.el-form-item) {
            margin-bottom: 0px;
        }
        :deep(.el-range-editor .el-range-input) {
            background-color: #f8f8f8;
        }
        :deep(.el-date-editor) {
            --el-date-editor-daterange-width: 260px;
        }
    }
    .pagination {
        display: flex;
        padding-top: 18px;
        justify-content: flex-end;
    }
}
</style>
